<template>
  <el-card shadow="never">
    <template #header>
      <div class="my--1.5 flex flex-row items-center justify-between">
        <CardTitle title="得分概览" />
        <el-select placeholder="请选择项目" v-model="projectId" clearable style="width: 200px" @change="getProjectStackedLine">
          <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </div>
    </template>
    <div class="min-w-225 py-1.75" v-loading="loading">
      <div ref="chartRef" class="chart-container"></div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { onMounted, ref, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import { ProjectApi } from "@/api/project/project";
import { StatisticsApi } from "@/api/project/statistics"

/** 折线图组件 */
defineOptions({ name: 'ProjectLineChartCard' });

const loading = ref(true); // 加载状态
const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;
let projectList = ref();
const checkTypeList = getIntDictOptions(DICT_TYPE.CHECK_TYPE2)
let projectId = ref(null)


// 图表选项
const chartOptions: echarts.EChartsOption = {
  title: {
    text: '项目得分统计',
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410],
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320],
    },
  ],
};

// 初始化图表
const initChart = async () => {
  projectList.value = await ProjectApi.getAllProject();
  await nextTick(); // 确保 DOM 已渲染
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
    chartInstance.setOption(chartOptions);
    loading.value = false; // 图表加载完成后，关闭加载状态
  }
};


const getProjectStackedLine = async (id: number) => {
  loading.value = true;
  const res = await StatisticsApi.getProjectStackedLine(id);
  console.log("checkTypeList", checkTypeList)
  console.log("res", res)

  // 处理 X 轴数据
  const xAxisData = res.map(item => item.name);

  // 处理 Series 数据
  const seriesData = checkTypeList.map(type => ({
    name: type.label,
    type: 'line',
    stack: 'Total',
    data: res.map(batch => {
      const record = batch.checkRecords.find(record => record.checkType === type.value);
      return record ? record.score : 0; // 如果没找到记录，默认分数为 0
    }),
  }));

  // 更新图表选项
  chartOptions.xAxis.data = xAxisData;
  chartOptions.series = seriesData;
  chartOptions.legend.data = checkTypeList.map(item => item.label); // 动态更新图例
  // 更新图表
  if (chartInstance) {
    chartInstance.setOption(chartOptions);
  }
  loading.value = false;
}


// 生命周期钩子
onMounted(() => {
  initChart();
});

onBeforeUnmount(() => {
  chartInstance?.dispose();
});
</script>

<style lang="scss" scoped>
.chart-container {
  width: 100%;
  height: 400px;
}
</style>
